<template>
  <div>
    <!--头部-->
    <Header :chooseValue="4"></Header>
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit">
          <span class="titleFont">{{ title }}</span>
          <div style="height:94px" v-if="pcshow"></div>
          <div style="height:30px" v-if="!pcshow"></div>
          <!-- pc端 -->
          <div style="text-align:left" v-if="pcshow">
            <div v-for="item in list" :key="item.key">
              <img
                v-if="item.type == 2"
                :src="item.content"
                 style="width:100%;margin-top:10px"
              />
              <span
                v-if="item.type == 1"
                class="titleCelebrityFont"
                style="padding-top:40px"
              >
                {{ item.content }}
              </span>
            </div>
          </div>
           <!-- 移动端 -->
          <div style="text-align:left;padding-left:20px;padding-right:20px" v-if="!pcshow">
            <div v-for="item in list" :key="item.key">
              <img
                v-if="item.type == 2"
                :src="item.content"
                 style="width:100%;margin-top:10px"
              />
              <span
                v-if="item.type == 1"
                class="titleCelebrityFont"
                style="padding-top:40px;font-size:14px"
              >
                {{ item.content }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
import Footer from "./footer";
export default {
  components: { Header, Footer },
  data() {
    return {
      type: 1,
      title: "",
      list: [],
      pcshow: false
    };
  },
  beforeCreate() {},
  created() {
    let info = this.$route.query.id;
    if (info.title == undefined) {
      this.$router.push({
        path: "/customs"
      });
    } else {
      this.title = info.title;
      this.list = JSON.parse(info.details);
    }
    if (this._isMobile()) {
      this.pcshow = false;
    } else {
      this.pcshow = true;
    }
  },
  //  监听路由变化
  watch: {
    $route(to, from) {
      let info = to.query.id;
      this.title = info.title;
      this.list = JSON.parse(info.details);
    }
  },
  mounted() {},

  methods: {
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    }
  }
};
</script>

<style>
.titleFont {
  font-size: 42px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}

.titleCelebrityFont {
  font-size: 16px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #333333;
  line-height: 30px;
  text-indent: 2em;
}
</style>
